<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:a4j="http://richfaces.org/a4j"
                template="layout/site-template.xhtml">

    <ui:define name="scripts">
        <link rel="stylesheet"
              href="js/jqzoom_ev1.0.1/css/jqzoom.css"/>
        <a4j:loadScript src="resource://jquery.js"/>
        <script type='text/javascript'
                src='js/jqzoom_ev1.0.1/js/jquery.jqzoom1.0.1.js'></script>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                var options = {
                    zoomWidth: 350,
                    zoomHeight: 225,
                    xOffset: 10,
                    yOffset: 0,
                    position: "right" //and MORE OPTIONS
                };
                jQuery('.zoomable').jqzoom(options);
            });
        </script>
    </ui:define>

    <ui:define name="menu">
        <ui:include src="view/includes/menu/richmenuform.xhtml"/>
    </ui:define>

    <ui:define name="left-content">

        <h:form>
            <rich:tree style="width:300px"
                       switchType="ajax"
                       componentState="#{treeNodeUtil.componentState}"
                       adviseNodeOpened="#{treeNodeUtil.adviseNodeOpened}">
                <rich:treeNodesAdaptor nodes="#{parentCategories}"
                                       var="_cat">
                    <rich:treeNode data="#{_cat.id}">
                        <s:link value="#{_cat.name}"
                                view="/products.xhtml"
                                title="#{_cat.name}"
                                propagation="none">
                            <f:param name="catId"
                                     value="#{_cat.id}"/>
                        </s:link>
                    </rich:treeNode>
                    <rich:treeNodesAdaptor nodes="#{_cat.children}"
                                           var="_childCat">
                        <rich:treeNode data="#{_childCat.id}">
                            <s:link value="#{_childCat.name}"
                                    view="/products.xhtml"
                                    title="#{_childCat.name}"
                                    propagation="none">
                                <f:param name="catId"
                                         value="#{_childCat.id}"/>
                                <f:param name="isChild"
                                         value="true"/>
                            </s:link>
                        </rich:treeNode>
                    </rich:treeNodesAdaptor>
                </rich:treeNodesAdaptor>
            </rich:tree>
        </h:form>
    </ui:define>

    <ui:define name="main-content-body">
        <rich:panel bodyClass="pbody"
                    styleClass="productpanel">
            <f:facet name="header">
                <h:outputText value="#{productHome.instance.name}"/>
            </f:facet>
            <rich:dataList value="#{productHome.instance.files}"
                           var="_file"
                           styleClass="imagelist">
                <a href="#{settingsList.singleResult.filePathClient}#{_file.fileName}"
                   class="zoomable"
                   title="#{_file.product.name}">
                    <s:graphicImage value="#{_file.originalByte.image}"
                                    fileName="#{_file.id}_large"
                                    alt="[image]"
                                    styleClass="small">
                        <s:transformImageSize width="300"
                                              maintainRatio="true"/>
                    </s:graphicImage>

                </a>
            </rich:dataList>
            <h:outputText value="#{productHome.instance.description}"
                          escape="false"
                          styleClass="product-description"/>
            <h:outputText value="#{productHome.instance.price}"
                          styleClass="product-price"/>
            <s:link value="buy"
                    action="#{shoppingCartAction.addProductToCart(productHome.instance)}"
                    styleClass="purchase-link"/>

        </rich:panel>
        <s:link value="edit product"
                view="/admin.xhtml"
                rendered="#{identity.hasRole('admin')}"
                styleClass="editlink">
            <f:param name="view"
                     value="product"/>
        </s:link>
    </ui:define>

    <ui:define name="footer">
        <h4>adm 'at' glxn.net </h4>
    </ui:define>
</ui:composition>
